import React, { useState } from 'react'
import { View, Text, Button } from '@tarojs/components'
import './HelloWorld.scss'

const HelloWorld = ({ msg }) => {
  const [count, setCount] = useState(0)

  return (
    <View className="hello-world">
      <Text className="title">{msg}</Text>
      
      <View className="card">
        <Button type="button" onClick={() => setCount(count + 1)}>
          count is {count}
        </Button>
        <Text className="description">
          Edit <Text className="code">components/HelloWorld.jsx</Text> to test HMR
        </Text>
      </View>

      <View className="links">
        <Text>
          Check out 
          <Text className="link" onClick={() => {
            window.open('https://vuejs.org/guide/quick-start.html#local', '_blank')
          }}>
            create-vue
          </Text>
          , the official Vue + Vite starter
        </Text>
        <Text>
          Learn more about IDE Support for Vue in the
          <Text className="link" onClick={() => {
            window.open('https://vuejs.org/guide/scaling-up/tooling.html#ide-support', '_blank')
          }}>
            Vue Docs Scaling up Guide
          </Text>
        </Text>
        <Text className="read-the-docs">Click on the Vite and Vue logos to learn more</Text>
      </View>
    </View>
  )
}

export default HelloWorld